<template>
	<div class="layout-padding">
		<splitpanes>
			<pane size="17">
				<el-card type="border-card" class="card-box">
					<template #header>
						<el-text type="primary" class="font-black">
							<el-icon class="mr-1">
								<PieChart />
							</el-icon>
							分类名称
						</el-text>
					</template>
					<customTree
						class="mx-2 mt-1"
						:data="data"
						:props="defaultProps"
						node-key="id"
						icon="ArrowRightBold"
						@node-click="handleNodeClick"
						highlight-current
						default-expand-all
					></customTree>
				</el-card>
			</pane>
			<pane size="83">
				<div class="layout-padding-auto layout-padding-view">
					<!--查询表单-->
					<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
						<el-form-item :label="$t('basMaterial.materialCode')" prop="materialCode">
							<el-input v-model="state.queryForm.materialCode" clearable :placeholder="$t('basMaterial.enterMaterialCode')" />
						</el-form-item>
						<el-form-item :label="$t('basMaterial.materialName')" prop="materialName">
							<el-input v-model="state.queryForm.materialName" clearable :placeholder="$t('basMaterial.enterMaterialName')" />
						</el-form-item>
						<el-form-item>
							<el-button icon="el-icon-search" type="primary" @click="getDataList">{{ $t('basMaterial.query') }} </el-button>
							<el-button icon="refresh" @click="resetQuery">{{ $t('basMaterial.reset') }}</el-button>
						</el-form-item>
					</el-form>
					<el-table
						:data="state.dataList"
						v-loading="state.loading"
						border
						:cell-style="tableStyle.cellStyle"
						stripe
						style="width: 100%; height: 100%"
						:header-cell-style="tableStyle.headerCellStyle"
						@sort-change="sortChangeHandle"
					>
						<el-table-column fixed type="index" label="#" width="50" />
						<el-table-column fixed prop="materialCode" :label="$t('basMaterial.materialCode')" show-overflow-tooltip width="140" />
						<el-table-column prop="materialName" :label="$t('basMaterial.materialName')" show-overflow-tooltip width="300" />
						<el-table-column prop="specification" :label="$t('basMaterial.specification')" show-overflow-tooltip width="500" />
						<el-table-column prop="unit" :label="$t('basMaterial.unit')" show-overflow-tooltip width="100" />
						<el-table-column prop="facialMaskSpec" :label="$t('basMaterial.facialMaskSpec')" show-overflow-tooltip width="300" />
						<el-table-column prop="inventoryCategory" :label="$t('basMaterial.inventoryCategory')" show-overflow-tooltip width="150" />
						<el-table-column prop="pcsPerBox" :label="$t('basMaterial.pcsPerBox')" show-overflow-tooltip width="100" />
						<el-table-column prop="boxPerPallet" :label="$t('basMaterial.boxPerPallet')" show-overflow-tooltip width="100" />
						<el-table-column prop="productType" :label="$t('basMaterial.productType')" show-overflow-tooltip width="100" />
						<el-table-column prop="plasticBoardColor" :label="$t('basMaterial.plasticBoardColor')" show-overflow-tooltip width="100" />
						<el-table-column prop="plasticBoardDensity" :label="$t('basMaterial.plasticBoardDensity')" show-overflow-tooltip width="100" />
						<el-table-column prop="plasticBoardThickness" :label="$t('basMaterial.plasticBoardThickness')" show-overflow-tooltip width="100" />
						<el-table-column prop="embossing" :label="$t('basMaterial.embossing')" show-overflow-tooltip width="100" />
					</el-table>
					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
				</div>
			</pane>
		</splitpanes>
	</div>
</template>

<script setup lang="ts">
import customTree from '/@/components/CustomTree/index.vue';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { GetMaterials, GetMaterialSort } from '/@/api/platform/digital/basMaterial';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
import { FolderOpened } from '@element-plus/icons-vue';

const { t } = useI18n();
const showTitle = ref('');

interface Tree {
	label: string;
	icon: 'FolderChecked';
	children?: Tree[];
}

const handleNodeClick = (data: Tree) => {
	state.queryForm.materialSort = data.label;
	showTitle.value = data.label;
	getDataList();
};

const data: Tree[] = ref([]);
onMounted(() => {
	GetMaterialSort().then((res) => {
		data.value = res.data;
	});
});

const defaultProps = {
	children: 'children',
	label: 'label',
};

// 搜索变量
const queryRef = ref();

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: GetMaterials,
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	getDataList(false);
};
</script>

<style scoped></style>
